<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, PropType, provide, ref, watch } from 'vue'
import { allViewType, aspectType, EnumAllViewType } from './imgTypes'
import { useHandlerTouchOrMouseOp } from './useHandlerTouchOrMouseOp'
import _ from 'lodash'
import FourCornerLayer from './components/FourCornerLayer.vue'
import CrossLayer from './components/CrossLayer.vue'
import { IMeasure, ISliceInfo } from './types'
import DragIndexSlider from './components/DragIndexSlider.vue'

const props = defineProps({
  imgSrc: {
    type: String as PropType<string>
  },
  viewType: {
    type: String as PropType<allViewType>,
    default: () => EnumAllViewType.stack
  },
  center: {
    type: Object
  },
  fourCornerInfo: {
    type: Object,
    default: null
  },
  measureInfo: {
    type: Object as PropType<IMeasure>,
    default: () => ({
      measuringArr: [],
      measureDoneArr: []
    })
  },
  sliceInfo: {
    type: Object as PropType<ISliceInfo>,
    default: null
  },
  imageId: {
    type:String as PropType<string>
  }
})

provide('viewerInfo', {
  sliceInfo: computed(() => props.sliceInfo),
  viewType: computed(() => props.viewType)
})

const viewerRef = ref()

const rect = ref()
const {
  handleMousedown,
  handleMousemove,
  handleMouseup,
  handleTouchStart,
  handleTouchEnd,
  handleTouchmove,
  handleWheel
} = useHandlerTouchOrMouseOp(rect, props.viewType)

const notifyAspect = (width: number, height: number) => {
  const w = Math.floor(width)
  const h = Math.floor(height)
  if (w === 0 || h === 0) {
    return
  }
  emit('setAspect', {
    width: w,
    height: h
  } as aspectType)
}
let resizeObserver: ResizeObserver
const watchResize = () => {
  resizeObserver = new ResizeObserver(
    _.debounce((entries) => {
      const { width, height } = entries[0].contentRect
      rect.value = viewerRef.value.getBoundingClientRect()
      notifyAspect(width, height)
    })
  )
  // 绑定监听的dom
  resizeObserver.observe(viewerRef.value)
}

onMounted(() => {
  watchResize()
})
onBeforeUnmount(() => {
  resizeObserver.disconnect()
})

const handleTouchCancel = () => {
  console.log('handleTouchCancel')
}

const emit = defineEmits(['setAspect'])
</script>

<template>
  <div class="w-full h-full flex">
    <div
      class="flex-1 h-full relative"
      @mousedown="handleMousedown"
      @mousemove="handleMousemove"
      @mouseup="handleMouseup"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchmove"
      @touchcancel="handleTouchCancel"
      @touchend="handleTouchEnd"
      @mouseleave="handleMouseup"
      @wheel="handleWheel"
      ref="viewerRef"
    >
      <img v-if="props.imgSrc" :src="props.imgSrc" alt="" />
      <four-corner-layer :four-corner-info="fourCornerInfo" />
      <cross-layer
        :view-type="viewType"
        v-if="viewType !== EnumAllViewType.stack && center?.color?.h_color"
        :center="props.center"
      />
    </div>
<!--    <div class="w-[40px] h-full" v-if="props.viewType === EnumAllViewType.stack">-->
<!--      <drag-index-slider class="h-full" v-if="sliceInfo" />-->
<!--    </div>-->
  </div>
</template>

<style scoped></style>
